<template>
  <div class="card">
    <div class="title">{{awards.title}}</div>
    <div v-if="awards.detail" class="awards-list">
      <div v-for="(item, index) in awards.detail" :key="index" class="award-item">
        <span class="name">{{awards.detail[index].awards}}</span>
        <span class="bonus">现金{{awards.detail[index].bonus}}元</span>
        <span class="number">x {{awards.detail[index].number}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'awards',
    props: {
      awards: {
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '../../common/sass/var';
  .awards-list {
    padding: 0 10px;
    .award-item {
      position: relative;
      height: 50px;
      margin-bottom: 10px;
      line-height: 50px;
      background: $color-pink;
      border-radius: 6px;
      color: #fff;
      &:before {
        position: absolute;
        left: 80px;
        top: 13px;
        display: table;
        width: 2px;
        height: 24px;
        content: '';
        background: #fff;
      }
      &:last-of-type {
        margin-bottom: 0;
      }
      .name {
        display: inline-block;
        width: 80px;
        text-align: center;
      }
      .bonus {
        display: inline-block;
        margin-left: 22px;
      }
      .number {
        display: inline-block;
        float: right;
        margin-right: 20px;
      }
    }
  }
</style>
